<template>
 
<div>
<ul v-for="a in list">
  <li>
  <p>姓名：{{a.name}}</p>
  <p>年龄：{{a.age}}</p>
  </li>

</ul>
</div>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div>
<table border="1">
  <thead>
    <tr style="background-color: aqua;">
      <td>用户借款编号</td>
      <td>借款用户账号</td>
      <td>借款款项名称</td>
      <td>借款金额</td>
      <td>剩余还款本金</td>
    </tr>
  </thead>
<tbody v-for="b in jlist">
  <tr>
      <td>{{b.id}}</td>
      <td>{{b.zh}}</td>
      <td>{{b.mc}}</td>
      <td>{{b.money}}</td>
      <td>{{b.huan}}</td>
    </tr>
</tbody>

</table>
</div>
<br>

<div>
  <input type="text" v-model="text">
  <p>{{text}}</p>
</div>
</template>


<script setup lang="ts">

import { reactive,toRefs,ref } from 'vue';

let data=reactive({
  list:[
    {name:"张大",age:"21"},
    {name:"李尔",age:"20"},
    {name:"刘珊",age:"22"},
    {name:"钱思",age:"25"},
    {name:"赵武",age:"24"}
  ],
  jlist:[
    {id:1,zh:"zhangsan",mc:"八维助学金",money:4000,huan:0},
    {id:2,zh:"lisi",mc:"八维助学金",money:10000,huan:1000}
  ],
  text:"双向数据绑定"
})

let {list,jlist,text} =toRefs(data)


</script>


<style scoped>
ul{
  list-style: none;
}
li{
  margin-bottom: 30px;
}


</style>
